<template>
  <div class="vip-container">
    <!-- 顶部背景与会员信息 -->
    <div class="vip-header">
      <h1>尊享会员中心</h1>
      <div v-if="userInfo.startTime && userInfo.endTime" class="vip-period">
        <span class="vip-label">会员有效期</span>
        <span class="vip-dates">
          {{ formatDate(userInfo.startTime) }} ~ {{ formatDate(userInfo.endTime) }}
        </span>
      </div>
      <div v-else class="no-vip">
        <p>您还不是会员，快来开通吧!</p>
      </div>
    </div>

    <!-- 会员权益 -->
    <div class="vip-benefits">
      <h2>会员尊享权益</h2>
      <div class="benefit-list">
        <div class="benefit-item">
          <img src="https://img.icons8.com/color/48/000000/star.png" />
          <p>专属折扣</p>
        </div>
        <div class="benefit-item">
          <img src="https://img.icons8.com/color/48/000000/clock--v1.png" />
          <p>优先预约</p>
        </div>
        <div class="benefit-item">
          <img src="https://img.icons8.com/color/48/000000/medal.png" />
          <p>会员积分</p>
        </div>
        <div class="benefit-item">
          <img src="https://img.icons8.com/color/48/000000/gift.png" />
          <p>专属礼品</p>
        </div>
      </div>
    </div>

    <!-- 会员续费套餐（单行显示） -->
    <div class="vip-packages">
      <h2>续费套餐</h2>
      <div class="package-list-one-line">
        <el-card
            v-for="pkg in packages"
            :key="pkg.name"
            shadow="hover"
            class="package-card"
        >
          <h3 class="pkg-name">{{ pkg.name }}</h3>
          <p class="pkg-months">{{ pkg.months }} 个月</p>
          <p class="pkg-price">
            ￥<span>{{ pkg.price }}</span>
            <del>{{ pkg.origin }}元</del>
          </p>
          <el-button
              type="primary"
              size="medium"
              :loading="loading"
              class="renew-btn"
              @click="showPayDialog(pkg)"
          >
            立即续费
          </el-button>
        </el-card>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <el-dialog
        title="扫码支付"
        v-model="payVisible"
        width="400px"
        center
        :close-on-click-modal="false"
    >
      <div class="pay-box">
        <div class="pay-amount">需支付：<strong>￥{{ selectedPkg.price }}</strong></div>

        <el-tabs v-model="payWay" stretch>
          <el-tab-pane label="微信支付" name="wechat">
            <div class="qrcode-box" v-if="qrcode">
              <img :src="qrcode" />
              <p>请使用微信扫一扫</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="支付宝支付" name="alipay">
            <div class="qrcode-box" v-if="qrcode">
              <img :src="qrcode" />
              <p>请使用支付宝扫一扫</p>
            </div>
          </el-tab-pane>
        </el-tabs>

        <el-button type="success" style="width: 100%; margin-top: 15px" @click="confirmPaid">
          我已支付完成
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import userApi from '@/api/user.js'
import { useUserInfoStore } from '@/store/userInfo.js'

const userInfoStore = useUserInfoStore()
const userInfo = ref({})
const loading = ref(false)

/* 套餐 */
const packages = [
  { name: '月卡', months: 1, price: 30, origin: 30 },
  { name: '季度卡', months: 3, price: 85, origin: 90 },
  { name: '半年卡', months: 6, price: 160, origin: 180 },
  { name: '年卡', months: 12, price: 300, origin: 360 },
  { name: '三年卡', months: 36, price: 800, origin: 1080 }
]

/* 支付弹窗相关 */
const payVisible = ref(false)
const selectedPkg = ref({})
const payWay = ref('wechat')
const qrcode = ref('')

/* 工具函数 */
const formatDate = (dateStr) => {
  const d = new Date(dateStr)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  return `${y}-${m}-${day} ${h}:${min}`
}

const loadUserInfo = () => {
  if (!userInfoStore.user?.id) {
    ElMessage.error('未获取到用户ID，请重新登录')
    return
  }
  userApi.selectById(userInfoStore.user.id).then(res => {
    if (res.code === 0) userInfo.value = res.data
  })
}

/* 弹出支付 */
const showPayDialog = (pkg) => {
  if (!userInfoStore.user?.id) {
    ElMessage.error('未获取到用户ID，请重新登录')
    return
  }
  selectedPkg.value = pkg
  qrcode.value = '' // 清空旧二维码
  payVisible.value = true
  setTimeout(() => {
    const rand = Math.random().toString(36).slice(2)
    qrcode.value = `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${rand}`
  }, 100)
}

/* 点击“我已支付完成” */
const confirmPaid = () => {
  payVisible.value = false
  doRenew()
}

/* 真正续费 */
const doRenew = () => {
  loading.value = true
  const now = new Date()
  let startTime, endTime

  if (userInfo.value.endTime && new Date(userInfo.value.endTime) > now) {
    startTime = userInfo.value.startTime
    endTime = new Date(userInfo.value.endTime)
    endTime.setMonth(endTime.getMonth() + selectedPkg.value.months)
  } else {
    startTime = now
    endTime = new Date()
    endTime.setMonth(endTime.getMonth() + selectedPkg.value.months)
  }

  userApi
      .update({ id: userInfoStore.user.id, startTime, endTime })
      .then(res => {
        loading.value = false
        if (res.code === 0) {
          ElMessage.success('续费成功！')
          loadUserInfo()
        } else {
          ElMessage.error(res.msg)
        }
      })
}

onMounted(() => loadUserInfo())
</script>

<style scoped>
.vip-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  font-family: "Helvetica Neue", Arial, sans-serif;
  padding: 20px 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vip-header {
  text-align: center;
}
.vip-header h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.vip-period {
  margin-top: 15px;
  background: linear-gradient(90deg, #ffd700, #ffa500);
  display: inline-block;
  padding: 25px 50px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}
.vip-period:hover {
  transform: scale(1.05);
}
.vip-label {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 500;
}
.vip-dates {
  font-size: 26px;
  font-weight: bold;
  color: #fff;
}
.no-vip p {
  font-size: 20px;
  color: #666;
}

/* 会员权益 */
.vip-benefits h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.benefit-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
.benefit-item {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 180px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.benefit-item:hover {
  transform: scale(1.05);
}
.benefit-item img {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
}
.benefit-item p {
  font-size: 16px;
  font-weight: 500;
}

/* 套餐卡片，单行显示 */
.vip-packages h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.package-list-one-line {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto; /* 超过宽度可以横向滚动 */
  padding-bottom: 10px;
}
.package-card {
  flex: 0 0 220px; /* 固定宽度，保持一行显示 */
  text-align: center;
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  padding: 25px 20px;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.package-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.pkg-name {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.pkg-months {
  font-size: 18px;
  color: #666;
  margin-bottom: 12px;
}
.pkg-price {
  font-size: 20px;
  color: #e53935;
  margin-bottom: 15px;
}
.pkg-price del {
  color: #aaa;
  font-size: 16px;
  margin-left: 8px;
}
.renew-btn {
  width: 100%;
  border-radius: 10px;
  font-size: 16px;
}

/* 支付弹窗 */
.pay-box {
  text-align: center;
}
.pay-amount {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
}
.qrcode-box img {
  width: 240px;
  height: 240px;
  margin: 10px 0;
}
.qrcode-box p {
  color: #666;
  font-size: 16px;
}
</style>
